<!DOCTYPE html>
<html lang="en">

<head>
    #include("./common/head.htm")
</head>

<body>
    #include("./common/header.htm")
    <div id="mainBody">
        <div class="container">
            <div class="row">
                #include("./common/sidebar.htm")
                <div class="span9" id="favourite-items">
                    <ul class="breadcrumb">
                        <li><a href="index.html">首页</a> <span class="divider">/</span></li>
                        <li class="active">我的收藏</li>
                    </ul>
                    <h3> 我收藏的商品 <small class="pull-right"> 共收藏了{{ total }}件商品</small></h3>
                    <hr class="soft" />
                    <hr class="soft" />

                    <!-- <ul class="nav nav-tabs">
                        <li class="active"><a href="#favourite-products" data-toggle="tab">收藏的商品</a></li>
                        <li><a href="#favaoite-shops" data-toggle="tab">收藏的店铺</a></li>
                    </ul> -->
                    <!-- <div class="tab-content">
                        <div class="tab-pane fade" id="favourite-products"> -->
                            <div id="myTab" class="pull-right">
                                <a href="#listView" data-toggle="tab" @click="toListView()"><span id="listSpan"
                                        class="btn btn-large"><i class="icon-list"></i></span></a>
                                <a href="#blockView" data-toggle="tab" @click="toBlockView()"><span id="blockSpan"
                                        class="btn btn-large btn-primary"><i class="icon-th-large"></i></span></a>
                            </div>
                            <br class="clr" />
                            <div class="tab-content">
                                <div class="tab-pane" id="listView">
                                    <div v-for="product in productList">
                                        <div class="row">
                                            <div class="span2">
                                                <img v-bind:src="product.src" alt="" />
                                            </div>
                                            <div class="span4">
                                                <h3>新品！</h3>
                                                <hr class="soft" />
                                                <h5>{{ product.description }}</h5>
                                                <p>
                                                </p>
                                                <a class="btn btn-small pull-right"
                                                    :href="'product_details.html?itemid='+product.id">查看详情</a>
                                                <br class="clr" />
                                            </div>
                                            <div class="span3 alignR">
                                                    <h3>{{ product.price.toFixed(2) }}元</h3>

                                                    <button @click="addToCart(product.id)" class="btn btn-large btn-primary"> 添加购物车 <i
                                                            class=" icon-shopping-cart"></i></button>
                                                    <a :href="'product_details.html?itemid='+product.id"
                                                        class="btn btn-large"><i class="icon-zoom-in"></i></a>
                                            </div>
                                        </div>
                                        <hr class="soft" />
                                    </div>
                                </div>

                                <div class="tab-pane active" id="blockView">
                                    <ul class="thumbnails">
                                        <li class="span3" v-for="product in productList">
                                            <div class="thumbnail">
                                                <a :href="'/view/product_details.html?itemid='+product.id">
                                                    <img v-bind:src="product.src" style="height: 300px;" alt="" /></a>
                                                <div class="caption">
                                                    <h5>Manicure &amp; Pedicure</h5>
                                                    <p style="white-space: nowrap;overflow: hidden;text-emphasis: ellipsis"
                                                        :title="product.description">
                                                        {{ product.description }}
                                                    </p>
                                                    <h4 style="text-align:center">
                                                        <a class="btn" href="product_details.html">
                                                            <i class="icon-zoom-in"></i>
                                                        </a>
                                                        <button class="btn" @click="addToCart(product.id)">添加<i class="icon-shopping-cart"></i></button>
                                                        <a class="btn btn-primary" href="#">{{ product.price.toFixed(2)
                                                            }}元</a>
                                                    </h4>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    <hr class="soft" />
                                </div>
                            </div>

                            <!-- <a href="compair.html" class="btn btn-large pull-right">Compair Product</a> -->
                            <div class="pagination">
                                <ul>
                                    <li><a href="javascript:void(0)" @click.prevent="backpage()">&lsaquo;</a></li>
                                    <li v-for="count in pagesequence">
                                        <a v-if="count === currentpage" href="javascript:void(0)">{{count}}</a>
                                        <a v-else href="javascript:void(0)" @click="toPage(count)">{{count}}</a>
                                    </li>
                                    <li><a href="javascript:void(0)" @click.prevent="nextpage()">&rsaquo;</a></li>
                                </ul>
                            </div>
                            <br class="clr" />
                        </div>
                        <div class="tab-pane fade" id="favaoite-shops">

                        <!-- </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
    <!-- MainBody End ============================= -->
    #include("./common/footer.htm")
</body>

</html>